<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadcrumbNav',
  data() {
    return {
      breadcrumbItems: [],
    };
  },
  created() {
    this.updateBreadcrumb();
  },
  watch: {
    '$route': function () {
      this.updateBreadcrumb();
    }
  },
  methods: {
    updateBreadcrumb() {
      const pathMap = {
        '/': '首页',
        '/users': '用户管理',
        '/products': '商品管理',
        '/orders': '订单管理',
      };
      this.breadcrumbItems = [];
      let route = this.$route;
      while (route.matched.length) {
        const name = pathMap[route.path];
        if (name) {
          this.breadcrumbItems.unshift({ name, path: route.path });
        }
        route = route.matched[0].parent; // 确保获取到父路由
      }
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  margin: 20px 0;
}
</style>
